
<!doctype html>
<html>
<head>
    <title>Demo &raquo; Custom drag handle &raquo; gridster.js</title>
    <link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.css">
    <link rel="stylesheet" type="text/css" href="../assets/demo.css">
</head>

<body>

<h1>Custom drag handle</h1>
<p>Restricts dragging from starting unless the mousedown occurs on the specified element(s).</p>


<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
            <header>|||</header>
            0
        </li>
        <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
            <header>|||</header>
            1
        </li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
            <header>|||</header>
            2
        </li>
        <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">
            <header>|||</header>
            3
        </li>

        <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
            <header>|||</header>
            4
        </li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
            <header>|||</header>
            5
        </li>
        <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">
            <header>|||</header>
            6
        </li>
        <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">
            <header>|||</header>
            7
        </li>
        <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">
            <header>|||</header>
            8
        </li>

        <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">
            <header>|||</header>
            9
        </li>
    </ul>
</div>

<style type="text/css">

    .gridster li header {
        background: #999;
        display: block;
        font-size: 20px;
        line-height: normal;
        padding: 4px 0 6px ;
        margin-bottom: 20px;
        cursor: move;
    }

</style>

<script type="text/javascript" src="../assets/jquery.js"></script>
<script src="../dist/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    var gridster;

    $(function(){

        gridster = $(".gridster ul").gridster({
            widget_base_dimensions: [100, 120],
            widget_margins: [5, 5],
            draggable: {
                handle: 'header'
            }
        }).data('gridster');

    });
</script>
</body>
</html>
